<template>
  <div class="group-table-box">

    <div class="add-label">
      <el-button type="primary" @click="onClickAddLabel">新增Banner</el-button>
    </div>

    <div class="table-container">
      <el-table
        :data="tableData"
        border
        :header-cell-class-name="'table-header'"
      >
        <el-table-column
          type="index"
          label="优先级"
          align="center"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="Banner名称"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="Banner图片（缩略图）">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="上传时间">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <div style="margin-bottom: 10px;">
              <el-button
                size="mini"
                type="primary"
                @click="check(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="remove(scope.$index, scope.row)"
              >删除</el-button>
              <el-tooltip
                :content="form.switchVal"
                placement="top"
                style="margin-left: 10px;"
              >
                <el-switch
                  v-model="form.switchVal"
                  active-value="on"
                  inactive-value="off">
                </el-switch>
              </el-tooltip>
            </div>
            <div>
              <el-button
                size="mini"
                @click="upMove(scope.$index, scope.row)"
              >上移</el-button>
              <el-button
                size="mini"
                @click="downMove(scope.$index, scope.row)"
              >下移</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="form.pageIndex"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="totalPageCount"
        style="text-align: center;margin-top: 20px;"
      >
      </el-pagination>
    </div>

    <!-- 点击添加 -->
    <el-dialog
      :visible.sync="showAddModal"
    >
      <div class="modal-container">
        <el-row class="modal-content" :gutter="16">
          <el-col :span="6">
            <p class="modal-label">Banner名称</p>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="addName"
              placeholder="广告位名称"
              class="modal-input"
              size="small"
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="6">
            <p class="modal-label">Banner图片</p>
            <p class="modal-label-detail">(建议尺寸 111*222)</p>
          </el-col>
          <el-col :span="18">
          <el-upload
            class="upload-demo"
            drag
            action="/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
          </el-upload>
          </el-col>
        </el-row>
        <div slot="footer" class="modal-footer">
          <el-button type="primary" @click="onClickAddConfirm">完成</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 点击编辑 -->
    <el-dialog
      :visible.sync="showEditModal"
    >
      <div class="modal-container">
        <el-row class="modal-content" :gutter="16">
          <el-col :span="6">
            <p class="modal-label">Banner名称</p>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="addName"
              placeholder="广告位名称"
              class="modal-input"
              size="small"
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="6">
            <p class="modal-label">Banner图片</p>
            <p class="modal-label-detail">(建议尺寸 111*222)</p>
          </el-col>
          <el-col :span="18">
          <el-upload
            class="upload-demo"
            drag
            action="/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
          </el-upload>
          </el-col>
        </el-row>
        <div slot="footer" class="modal-footer">
          <el-button type="primary" @click="onClickEditConfirm">完成</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLoading: false,
      totalPageCount: 10,
      showAddModal: false,
      showEditModal: false,
      uploadAddImgUrl: '',
      showAddUploadImg: false,
      uploadEditImgUrl: '',
      showEditUploadImg: false,
      addName: '',
      editName: '',
      adId: '',
      advertisingNo: '',
      form: {
        name: '',
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [{
        name: '123213',
        img: '123213',
        time: 'adsfasfd'
      }]
    }
  },
  mounted() {
    // this.getTableData()
  },
  watch: {
  },
  methods: {
    onClickAddLabel() {
      this.showAddModal = true
    },
    onClickAddConfirm() {

    },
    onClickEditConfirm() {

    },
    check(index) {
      this.showEditModal = true
    },
    remove(index) {
      this.adId = this.tableData[index].id;
      this.$confirm('确定删除？', '确定删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {

      });
    },
    switch(index, value) {

    },
    upMove(index) {
      // 上移
    },
    downMove(index) {
      // 下移
    },
    onChangeEditUpload(event) {

    },
    onChangeAddUpload(event) {

    },
    getTableData(index) {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.group-table-box {
  overflow-x: hidden;
}
.table-container-page {
  color: #000;
  text-align: center;
  margin-top: 20px;
}
.add-label {
  display: block;
  text-align: right;
  margin: 0 0 20px 0;
}
.modal-container {
  /*padding: 30px 30px 20px 30px;*/
}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  font-size: 16px;
  line-height: 32px;
  text-align: center;
}
.modal-label-detail {
  text-align: center;
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  width: 100px;
}
</style>
